import Image from "next/image"
import { CheckCircleIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardFooter } from "@/components/ui/card"

interface SuccessCaseProps {
  imageUrl: string
  title: string
  tags: string[]
  accuracy: number
  onImageClick?: (url: string) => void
}

export function SuccessCase({ imageUrl, title, tags, accuracy, onImageClick }: SuccessCaseProps) {
  return (
    <Card className="overflow-hidden transition-all hover:shadow-md">
      <div className="relative aspect-[4/3] w-full overflow-hidden cursor-zoom-in" onClick={() => onImageClick && onImageClick(imageUrl)}>
        <Image
          src={imageUrl || "/placeholder.svg"}
          alt={title}
          fill
          className="object-cover transition-transform hover:scale-105"
        />
      </div>
      <CardContent className="p-4">
        <h3 className="mb-2 text-lg font-bold">{title}</h3>
        <div className="flex flex-wrap gap-2">
          {tags.map((tag) => (
            <Badge key={tag} variant="secondary">
              {tag}
            </Badge>
          ))}
        </div>
      </CardContent>
      <CardFooter className="flex items-center justify-between border-t bg-muted/20 p-4">
        <div className="flex items-center gap-1 text-sm text-muted-foreground">
          <CheckCircleIcon className="h-4 w-4 text-green-500" />
          <span>识别成功</span>
        </div>

      </CardFooter>
    </Card>
  )
}
